import React, { useState, useEffect, useRef } from 'react';
import { Button, Form, message, Table } from 'antd';
import request from '@/utils/request';
import { VendorSelect, EmpSelect } from '@/components/FormItemSelect';
import moment from 'moment';
import { FormattedMessage, useIntl } from 'umi';

const apiURL = '/api/services/app/POHeader/';

const CreatePOForm: React.FC<any> = (props) => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [poNum, setPoNum] = useState(0);
  const formRef = useRef<any>();
  const intl = useIntl();

  useEffect(() => {
    console.log(props.data);
    setDataSource(props.data);
  }, [props.data]);

  const onFinish = (values: any) => {
    const data = values.model;
    data.termsCode = 'HDFK';
    data.shipViaCode = '汽运';
    data.entryPerson = 'admin';
    data.currencyCode = 'RMB';
    data.poType = 'ipo';
    const sugIdArr: any = [];
    dataSource.forEach((element: any) => {
      sugIdArr.push(parseInt(element.OrderNum));
    });
    data.items = sugIdArr;
    setLoading(true);
    const act = 'CreateBySugg';
    request(apiURL + act, {
      method: 'POST',
      data,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success(intl.formatMessage({id:'pages.create.success'}));
          setPoNum(response.result.poNum);
        }
        setLoading(false);
      }
    });
  };

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };
  const columns = [
    {
      title: <FormattedMessage id="pages.partNum" />,
      dataIndex: 'PartNum',
      width: 140,
    },
    {
      title: <FormattedMessage id="pages.partDescription" />,
      dataIndex: 'PartDescription',
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.quantity" />,
      dataIndex: 'SupplyQty',
      width: 100,
    },
    {
      title: <FormattedMessage id="pages.dueDate" />,
      dataIndex: 'DueDate',
      width: 100,
      render: (text: any) => moment(text).format('YYYY-MM-DD'),
    },
    {
      title: <FormattedMessage id="pages.orderNum" />,
      dataIndex: 'OrderNum',
      width: 60,
    },
  ];

  return (
    <>
      <Form {...layout} ref={formRef} onFinish={onFinish}>
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 5 }}>
          <Button type="link">
            <FormattedMessage id="pages.poNum" />：{poNum}
          </Button>
        </Form.Item>
        <EmpSelect
          rules={[{ required: true, message: <FormattedMessage id="pages.buyerID.required" /> }]}
          width={200}
          name={['model', 'buyerID']}
          label={<FormattedMessage id="buyer" />}
        />
        <VendorSelect
          rules={[{ required: true, message: <FormattedMessage id="pages.vendorNum.required" /> }]}
          showSearch={true}
          width={200}
          name={['model', 'vendorNum']}
          label={<FormattedMessage id="pages.vendor" />}
        />
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 5 }}>
          <Button type="primary" htmlType="submit" loading={loading}>
            <FormattedMessage id="pages.submit" />
          </Button>
        </Form.Item>
      </Form>
      <Table
        rowKey="RowId"
        key="RowId"
        size="small"
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        onRow={(record:any) => {
          return {
            onDoubleClick: () => {
              setDataSource(dataSource.filter((o: any) => o.id != record.id));
            },
          };
        }}
        scroll={{ x: 600 }}
        bordered
      />
    </>
  );
};

export default CreatePOForm;
